<template>
    <div>
        <header class="pr white" style="padding: 45px 0px 40px;">
            <img src="../../assets/images/7.jpg" class="displayB centerauto shadowB" style="max-width: 70%;margin: 0px auto;padding: 10px;background: #fff;" />
        </header>
        <div v-if="!isAccount" style="padding-top: 30px;">
            <van-cell-group>
                <van-field v-model="username" label="账号" placeholder="请输入需要转入的账号"/>
            </van-cell-group>
            <div class="text-center" style="margin-top: 100px;">
                <van-button type="primary" class="width_80p btn_size_40" @click="gostep">下一步</van-button>
            </div>
        </div>
        <div v-if="isAccount">
            <van-tabs v-model="active" @change="tabChange">

                <van-tab title="转出证券">
                    <van-cell-group>
                        <van-field label="转入账户：" v-model="form.u_email" disabled />
                        <van-field label="转出证券：" v-model="form.coupon" placeholder="请选择" @click="showFun">
                            <van-tag  plain color="#d92626" text-color="#d92626" slot="button" v-show="couponInfo.us_securities_money">市值：{{couponInfo.us_securities_money}}</van-tag>
                        </van-field>
                        <van-field label="转出数额：" type="number" v-model="form.proportion" placeholder="需小于当前选中券市值且是100的倍数" />
                        <van-field label="支付密码：" type="password" maxlength="6" v-model="form.password" placeholder="请输入支付密码" />
                    </van-cell-group>
                    <div class="text-center margin_t50">
                        <van-button type="primary" class="width_80p btn_size_40" @click="onSubmit">确认转出</van-button>
                    </div>
                </van-tab>

                <van-tab title="转到账户">
                    <van-cell-group>
                        <van-field label="转入账户：" v-model="form.u_email" disabled />
                        <van-field label="转出金额：" type="number" v-model="form.proportion" placeholder="请输入金额" />
                        <van-field label="支付密码：" type="password" maxlength="6" v-model="form.password" placeholder="请输入支付密码" />
                    </van-cell-group>
                    <div class="text-center margin_t50">
                        <van-button type="primary" class="width_80p btn_size_40" @click="submitFun">确认转出</van-button>
                    </div>
                </van-tab>

            </van-tabs>
        </div>
        <!-- 选择券 -->
        <van-popup v-model="coupon" position="bottom">
            <div v-for="(item,index) in list" :key="index" class="van-cell flexbox spacebetween">
                <div>
                    <div>
                        <span>{{item.p_name}}</span>
                        <img :src="item.p_photo" height="20" style="vertical-align: middle;" />
                    </div>
                    <div class="flexbox spacebetween">
                        <p>市值：{{item.us_securities_money}}</p>
                        <p class="margin_l30">昨日收益：{{item.us_yesterday_earnings}}</p>
                    </div>
                </div>
                <van-button type="primary" size="small" @click="chooseFun(item.us_id,item.us_securities_money,item.p_name)">选择</van-button>
            </div>
        </van-popup>


    </div>
</template>
<script>

    import '@/assets/css/main.css'
    export default {
        data(){
            return{
                isAccount: false,
                username: '',
                active: 0,
                coupon: false,  //选择券
                form: {
                    u_email: '',
                    coupon: '',
                    proportion: '',
                    password: '',
                },
                couponInfo: {'couponId': '','us_securities_money': ''},  //需要转出券的info
                list: [],
            }
        },
        methods: {
            init(){
                var _this = this;
                //拥有的证券列表
                this.$httpGet('/api/index/Personal_center/getHaveProjectList',{
                    'u_id': window.localStorage.u_id,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.list = response.msg;

                    }else if(response.code == 300){
                        _this.list = [];
                    }else{
                        
                        _this.$toast(response.msg);
                    }

                });
            },
            //下一步
            gostep(){
                var _this = this;
                //校验账号是否是系统内部账号
                this.$httpGet('/api/index/Personal_center/emailIsExistence',{
                    'u_id': window.localStorage.u_id,
                    'u_email': this.username,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.isAccount = true;
                        _this.form.u_email = _this.username;

                    }else{
                        
                        _this.$toast(response.msg);
                    }

                });
                
            },
            //选择券
            chooseFun(id,us_securities_money,name){
                console.log(id,us_securities_money,name);
                this.couponInfo.couponId = id;
                this.couponInfo.us_securities_money = us_securities_money;
                this.form.coupon = name;
                this.coupon = false;
            },
            //提交  转出券
            onSubmit(){
                var _this = this;

                if(!_this.form.coupon){
                    _this.$toast('请先选择需要转出的券');
                    return;
                }
                if(!_this.form.proportion){
                    _this.$toast('请输入转出数额');
                    return;
                }else{

                    if(_this.form.proportion == 0){
                        _this.$toast('转出数额不能为0');
                        return;
                    }

                    if(parseFloat(_this.form.proportion) > parseFloat(_this.couponInfo.us_securities_money)){
                        _this.$toast('转出数额不可超过当前选中券市值');
                        return;
                    }
                    
                    if(parseFloat(_this.form.proportion)%100 != 0){
                         _this.$toast('转出数额需是100的倍数');
                        return;
                    }
                }
                if(!_this.form.password){
                    _this.$toast('请输入支付密码');
                    return;
                }
                //提交
                this.$httpPost('/api/index/Personal_center/userTurnOutProject',{
                    'u_id': window.localStorage.u_id,
                    'us_id': _this.couponInfo.couponId,
                    'u_email': _this.form.u_email,
                    'money': _this.form.proportion,
                    'password': _this.form.password,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.$toast(response.msg);

                        setTimeout(() => {
                            _this.$router.push({path:'/transferrecord'});
                        }, 2000);
                        

                    }else{
                        
                        _this.$toast(response.msg);
                    }

                });
            },
            //提交  转账
            submitFun(){
                var _this = this;

                
                if(!_this.form.proportion){
                    _this.$toast('请输入转出数额');
                    return;
                }else{

                    if(_this.form.proportion == 0){
                        _this.$toast('转出数额不能为0');
                        return;
                    }
                    
                    if(parseFloat(_this.form.proportion)%100 != 0){
                         _this.$toast('转出数额需是100的倍数');
                        return;
                    }
                }
                if(!_this.form.password){
                    _this.$toast('请输入支付密码');
                    return;
                }
                //提交
                this.$httpPost('/api/index/Personal_center/userTurnOutDollar',{
                    'u_id': window.localStorage.u_id,
                    'u_email': _this.form.u_email,
                    'money': _this.form.proportion,
                    'password': _this.form.password,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.$toast(response.msg);

                        setTimeout(() => {
                            _this.$router.push({path:'/transferrecord'});
                        }, 2000);
                        

                    }else{
                        
                        _this.$toast(response.msg);
                    }

                });
            },
            //tab   change
            tabChange(){
                this.form.coupon = '';
                this.couponInfo.couponId = '';
                this.couponInfo.us_securities_money = '';
                this.form.proportion = '';
                this.form.password = '';
            },
            showFun(){
                this.coupon = true;
                if(this.list.length == 0){
                    this.$toast('尚未购买证券');
                }
            },
        },
        mounted(){
            this.init();
        },
    }
</script>